<template>
  <div>
    <h1>今年的年龄：{{$store.state.age}}</h1>
    <h1>明年的年龄：{{$store.getters.nextAge}}</h1>
    <h1>数量：{{$store.state.count}}</h1>
    <button @click="changeNum">+1</button>
    <p>手机列表</p>
    <ul>
      <li
        v-for="(phone, index) in list"
        :key="index"
      >
      <router-link :to="'/phonedetail/'+phone.name+'?price='+phone.price">
        {{phone.name}}-{{phone.price}}
      </router-link>
      </li>
    </ul>
  </div>
</template>

<script>
import {ADD} from '../store/mutation-types'
export default {
  data() {
    return {
      list: [
        {name: 'iphone', price: 9999},
        {name: 'xiaomi', price: 8999},
        {name: 'huawei', price: 7999},
      ]
    }
  },
  methods: {
    changeNum() {
      // 修改state中的状态
      this.$store.commit(ADD);
    }
  }
}
</script>

<style>

</style>